<template>
  <div class="train">
  	<!--<router-view></router-view>-->
  	<img :src="banner" width="100%" height="auto"/>
    <ul class="train-box">
    	<li v-for="item in trainList">
    		<router-link :to="item.jumpPath">
    			<img :src="item.img" />
    			<p class="list-item-name">{{item.trainName}}</p>
    		</router-link>
    	</li>
    </ul>
  </div>
</template>
<script>
import trainImg from '@/assets/experienceShare.png'
import trainBanner from '@/assets/trainBanner.png'

export default {
//	name: '.train',
  data () {
    return {
    	banner: trainBanner,
      trainList: [
      	{
      		jumpPath: '/trainDetail',
      		img: trainImg,
      		trainName: '经验分享'
      	},{
      		jumpPath: '/trainDetail',
      		img: trainImg,
      		trainName: '经验分享'
      	},{
      		jumpPath: '/trainDetail',
      		img: trainImg,
      		trainName: '经验分享'
      	},{
      		jumpPath: '/trainDetail',
      		img: trainImg,
      		trainName: '经验分享'
      	},{
      		jumpPath: '/trainDetail',
      		img: trainImg,
      		trainName: '经验分享'
      	},{
      		jumpPath: '/trainDetail',
      		img: trainImg,
      		trainName: '经验分享'
      	},{
      		jumpPath: '/trainDetail',
      		img: trainImg,
      		trainName: '经验分享'
      	}
      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.train-box{
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
	}
	ul li{
		width: 2.4rem;
	}
	.list-item-name{
		margin-top: .2rem;
	}
</style>
